<template>
  <view class="template-avatar tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>头像</tn-nav-bar>
    
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="cropper-options">
        <view class="cropper-options__item" @tap="chooseImage">选择图片</view>
      </view>
      
    </view>
    
    <tn-cropper
      :imageUrl="imageUrl"
      :isRound="isRound"
      @cropper="cropperFinish"
    ></tn-cropper>
  </view>
</template>

<script>
  import common_mixin from '@/libs/mixin/common.js';
  import { putUserInfo } from '@/libs/js/api.js';
  import multipleOptionsDemo from '@/libs/components/multiple-options-demo';
  export default {
    name: 'TemplateAvatar',
    components: { multipleOptionsDemo },
    mixins: [common_mixin],
    data() {
      return {
        imageUrl: '',
        isRound: false,
        switchText: '正方形裁剪框',
        showCropperImage: false,
        cropperImageUrl: ''
      }
    },
    methods: {
      // 选择图片
      chooseImage() {
        uni.chooseImage({
          count: 1,
          mediaType: ['image'],
          sizeType: ['original', 'compressed'],
          sourceType: ['album','camera'],
          success: (res) => {
            const tempFilePaths = res.tempFilePaths[0]
            this.imageUrl = tempFilePaths
            
          }
        })
      },
      // 切换裁剪框形状
      switchBorderRect() {
        this.isRound = !this.isRound
        if (this.isRound) {
          this.switchText = '切换为正方形裁剪框'
        } else {
          this.switchText = '切换为圆形裁剪框'
        }
      },
      // 裁剪完成
      cropperFinish(res) {
        uni.uploadFile({
          url: 'https://dinerapi.hiotk.com/eat/api/oss/upload', //仅为示例，非真实的接口地址
          filePath: res.url,
          name: 'file',
          header: {
          	'token': this.$store.state.token,
            'xversion': 'v1.5'
          },
          formData: {
          },
          success: (uploadFileRes) => {
          	console.log(uploadFileRes.data);
            
          	const d = JSON.parse(uploadFileRes.data);
            if(d.code === 0){
              putUserInfo({
                avatar: d.data.src
              }).then((r) => {
                console.log(r);
                this.goBack();
              });
            }
          	// if(d.status === 'success'){
          	// 	console.log(1)
          	// 	updateUserInfo({
          	// 		avatar: d.data.image_src
          	// 	}).then((r) => {
          	// 		console.log(r);
          	// 		uni.navigateBack({
          	// 			delta: 2
          	// 		});
          	// 	});
          	// }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cropper-options {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    margin-top: 90rpx;
    
    &__item {
      color: #FFFFFF;
      font-size: 28rpx;
      padding: 18rpx 56rpx;
      border: 2rpx solid #FFFFFF;
      z-index: 1000;
      width: 280px;
      text-align: center;
    }
  }
</style>
